<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active1{
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640331832&t=8fe4ed8dbf43c180120fecc1e45c47f4);
            background-size: 100vw 100vh;
        }
        .active2{
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640331869&t=93c52fae853c1272ddc792a2bbaa928f);
            background-size: 100vw 100vh;
        }

    </style>
</head>
<body>
    <div class="box">
        1111
        <div class="box2">2222</div>
    </div>
    <button>我是皮肤一</button><button>我是皮肤二</button>
    <script>
        // var btns = document.querySelectorAll("button");
        var btns = document.getElementsByTagName("button");
        // console.log(btns);
        // btns[0].onclick = function(){
        //     document.body.className = "active1";
        // }

        // btns[1].onclick = function(){
        //     document.body.className = "active2";
        // }

    // 1.获取元素；可以指定范围获取
    //      var boxEle1 =   document.querySelector(".box");
    // //   console.log(boxEle);

    //     var boxEle2 =   boxEle1.querySelector(".box2");
    //     console.log(boxEle2);

    // 2.元素循环；相互转换类型
    // console.log(btns);
   Array.from(btns).forEach(function(item,key){
        // console.log(item);
        item.onclick = function(){
            // console.log(key);
            if(key==0){
                document.body.className = "active1";
            }else if(key==1){
                document.body.className = "active2";
            }
        }
    })


    // 

    </script>
</body>
</html>